<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>DecorTrendzTest</title>
		<meta name="description" content="" />
		<meta name="author" content="PerronJones" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/dataFunctions.js"></script>
        <script type="text/javascript" src="js/decorTrendz.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>

		 
		<script>
		$(document).on('mousedown','div.ui-dragged', function() {
        	//console.log("ON MOUSE DOWN");
        	$('div.ui-dragged').not(this).css('z-index', '100');
			$(this).css('z-index', '1000');
    	});
		
		$(function() {
		
  		$(".ui-tile").draggable({ appendTo: "body", scroll: false, containment: 'window', helper: 'clone', snap: ".tileSpot", snapMode: "inner", revert: "invalid", snapTolerance: 45});
  		
  		
  		$(".tileSpot").droppable({tolerance: "fit",  
  		drop: function(event, ui) {
  			//console.log($(this).attr('id'));
  			//$(this).attr('class', "contains-tile ui-droppable tileSpot");
  			//$(this).children("div:last").remove();
  			//console.log("Disabling: "+$(this).attr('id'));
  			//$(this).droppable("disable");
  			if(ui.draggable.attr('class').indexOf("ui-dragged") == -1 )
  			{
  				var newDiv = $(ui.helper).clone(true)
				$(newDiv).attr('class',"ui-dragged ui-draggable" );
				$(this).children("div").remove();
				$(this).append(newDiv);
				$(".ui-dragged").draggable({ snap: ".tileSpot", snapMode: "inner", revert: "invalid",
  									drag: function(event, ui){
  										if($(this).attr('class').indexOf("ui-dragged") != -1 )
  										{
  											if(ui.position.left > 800)
  											{
  												$(this).remove();
  											}
  										}
  									},
  									start: function(event, ui){
  										//console.log("Parent ID: "+$(this).parent().attr('id'));
  										//console.log("Enabling: "+$(this).parent().attr('id'));
  										//$(this).parent().droppable( "enable" );
  									}
  									});
  			}
  			else {
  				var parentDiv = ui.draggable.parent();
  				//console.log("ParentDiv ID: "+$(parentDiv).attr('id'));
  				
  				if($(this).children("div:first")[0] !== (ui.draggable[0])) {
  					//console.log("CHILDREN NOT EQUAL!");
  					$(this).children("div").remove();
  					//parentDiv.children("div:last").remove();
  				}
  				var dragObj = ui.draggable;
  				dragObj.attr('class',"ui-dragged ui-draggable" );
  				$(this).append(dragObj);
  				
  			}
		}
  		});
		});
		</script>
		
		
        
	</head>

	<body>
		<!--
		<h1>Decor Trendz:  Drag and Drop!</h1>
		-->
		<div id="header" style="background-color: silver;" >
            <img src="css/img/DTZ_new_Scaled.png" width="15%" height="15%"/>
        </div>
		
		<div id="gridAndScroll">
		
			<div id="imageScroll" class="ui-scroll-box">
				
				<?php
				$dir = '/opt/lampstack-5.4.10-0/apache2/htdocs/decortrendz.com/images/tiles';
				$files = scandir($dir);
				$images = array();
				foreach($files as $file){
					if(fnmatch('*.jpeg',$file)){
						$images[] = $file;
					}
				}
				foreach($images as $image){
					echo '<div id="'.$image.'" class="ui-tile"> <img src="images/tiles/'.$image.'" height="75" width="75"/> </div>';
				}
				?>
				
			</div>
			
			<div id="grid">
				<div id="row1" class="gridRow">
					<div id="dropArea1" class="tileSpot">
					</div>
					<div id="dropArea2" class="tileSpot">
					</div>
					<div id="dropArea3" class="tileSpot">
					</div>
					<div id="dropArea31" class="tileSpot">
					</div>
					<div id="dropArea32" class="tileSpot">
					</div>
					<!--
					<div id="dropArea33" class="tileSpot">
					</div>
					<div id="dropArea34" class="tileSpot">
					</div>
					<div id="dropArea35" class="tileSpot">
					</div>
					<div id="dropArea36" class="tileSpot">
					</div>
					<div id="dropArea37" class="tileSpot">
					</div>
					-->
				</div>
				<div id="row2" class="gridRow">
					<div id="dropArea4" class="tileSpot">
					</div>
					<div id="dropArea5" class="tileSpot">
					</div>
					<div id="dropArea6" class="tileSpot">
					</div>
					<div id="dropArea38" class="tileSpot">
					</div>
					<div id="dropArea39" class="tileSpot">
					</div>
					<!--
					<div id="dropArea40" class="tileSpot">
					</div>
					<div id="dropArea41" class="tileSpot">
					</div>
					<div id="dropArea42" class="tileSpot">
					</div>
					<div id="dropArea43" class="tileSpot">
					</div>
					<div id="dropArea44" class="tileSpot">
					</div>
					-->
				</div>
				<div id="row3" class="gridRow">
					<div id="dropArea7" class="tileSpot">
					</div>
					<div id="dropArea8" class="tileSpot">
					</div>
					<div id="dropArea9" class="tileSpot">
					</div>
					<div id="dropArea45" class="tileSpot">
					</div>
					<div id="dropArea46" class="tileSpot">
					</div>
					<!--
					<div id="dropArea47" class="tileSpot">
					</div>
					<div id="dropArea48" class="tileSpot">
					</div>
					<div id="dropArea49" class="tileSpot">
					</div>
					<div id="dropArea50" class="tileSpot">
					</div>
					<div id="dropArea51" class="tileSpot">
					</div>
					-->
				</div>
				<div id="row4" class="gridRow">
					<div id="dropArea10" class="tileSpot">
					</div>
					<div id="dropArea11" class="tileSpot">
					</div>
					<div id="dropArea12" class="tileSpot">
					</div>
					<div id="dropArea52" class="tileSpot">
					</div>
					<div id="dropArea53" class="tileSpot">
					</div>
					<!--
					<div id="dropArea54" class="tileSpot">
					</div>
					<div id="dropArea55" class="tileSpot">
					</div>
					<div id="dropArea56" class="tileSpot">
					</div>
					<div id="dropArea57" class="tileSpot">
					</div>
					<div id="dropArea58" class="tileSpot">
					</div>
					-->
				</div>
				<div id="row5" class="gridRow">
					<div id="dropArea13" class="tileSpot">
					</div>
					<div id="dropArea14" class="tileSpot">
					</div>
					<div id="dropArea15" class="tileSpot">
					</div>
					<div id="dropArea59" class="tileSpot">
					</div>
					<div id="dropArea60" class="tileSpot">
					</div>
					<!--
					<div id="dropArea61" class="tileSpot">
					</div>
					<div id="dropArea62" class="tileSpot">
					</div>
					<div id="dropArea63" class="tileSpot">
					</div>
					<div id="dropArea64" class="tileSpot">
					</div>
					<div id="dropArea65" class="tileSpot">
					</div>
					-->
				<!--
				</div>
				<div id="row6" class="gridRow">
					<div id="dropArea16" class="tileSpot">
					</div>
					<div id="dropArea17" class="tileSpot">
					</div>
					<div id="dropArea18" class="tileSpot">
					</div>
					<div id="dropArea66" class="tileSpot">
					</div>
					<div id="dropArea67" class="tileSpot">
					</div>
					<div id="dropArea68" class="tileSpot">
					</div>
					<div id="dropArea69" class="tileSpot">
					</div>
					<div id="dropArea70" class="tileSpot">
					</div>
					<div id="dropArea71" class="tileSpot">
					</div>
					<div id="dropArea72" class="tileSpot">
					</div>
				</div>
				<div id="row7" class="gridRow">
					<div id="dropArea19" class="tileSpot">
					</div>
					<div id="dropArea20" class="tileSpot">
					</div>
					<div id="dropArea21" class="tileSpot">
					</div>
					<div id="dropArea73" class="tileSpot">
					</div>
					<div id="dropArea74" class="tileSpot">
					</div>
					<div id="dropArea75" class="tileSpot">
					</div>
					<div id="dropArea76" class="tileSpot">
					</div>
					<div id="dropArea77" class="tileSpot">
					</div>
					<div id="dropArea78" class="tileSpot">
					</div>
					<div id="dropArea79" class="tileSpot">
					</div>
				</div>
				<div id="row8" class="gridRow">
					<div id="dropArea22" class="tileSpot">
					</div>
					<div id="dropArea23" class="tileSpot">
					</div>
					<div id="dropArea24" class="tileSpot">
					</div>
					<div id="dropArea80" class="tileSpot">
					</div>
					<div id="dropArea81" class="tileSpot">
					</div>
					<div id="dropArea82" class="tileSpot">
					</div>
					<div id="dropArea83" class="tileSpot">
					</div>
					<div id="dropArea84" class="tileSpot">
					</div>
					<div id="dropArea85" class="tileSpot">
					</div>
					<div id="dropArea86" class="tileSpot">
					</div>
				</div>
				<div id="row9" class="gridRow">
					<div id="dropArea25" class="tileSpot">
					</div>
					<div id="dropArea26" class="tileSpot">
					</div>
					<div id="dropArea27" class="tileSpot">
					</div>
					<div id="dropArea87" class="tileSpot">
					</div>
					<div id="dropArea88" class="tileSpot">
					</div>
					<div id="dropArea89" class="tileSpot">
					</div>
					<div id="dropArea90" class="tileSpot">
					</div>
					<div id="dropArea91" class="tileSpot">
					</div>
					<div id="dropArea92" class="tileSpot">
					</div>
					<div id="dropArea93" class="tileSpot">
					</div>
				</div>
				<div id="row10" class="gridRow">
					<div id="dropArea28" class="tileSpot">
					</div>
					<div id="dropArea29" class="tileSpot">
					</div>
					<div id="dropArea30" class="tileSpot">
					</div>
					<div id="dropArea94" class="tileSpot">
					</div>
					<div id="dropArea95" class="tileSpot">
					</div>
					<div id="dropArea96" class="tileSpot">
					</div>
					<div id="dropArea97" class="tileSpot">
					</div>
					<div id="dropArea98" class="tileSpot">
					</div>
					<div id="dropArea99" class="tileSpot">
					</div>
					<div id="dropArea00" class="tileSpot">
						
					</div>
				</div>
				-->
			</div>
		
		</div>
		
		<style>
		
		body
		{
           
          background-image:url('css/img/paven.png');
          background-repeat:repeat;
            
        }
		
		#header
		{
			margin-bottom: 15px;
		}
		.ui-draggable
		{
			height : 75px;
			width : 75px;
		}
		#grid
		{
			display : table;
			width : 377px;
			height : 376px;
		}
		.gridRow
		{
			display : table-row;
		}
		.tileSpot
		{
			display : table-cell;
			border:1px solid;
			border-color : black;
			background-color: gray;
			width : 73px;
			height : 73px;
			float: left;
			overflow : hidden;
		}
		#imageScroll
		{
			overflow:scroll;
			float:right;
			width: 170px;
			height: 500px;	
			position: relative;
			border : 1px solid;
			border-color : black;
		}

		#imageScroll div {
			float:left;
		}
		
		#gridAndScroll
		{
			width:50%;
			margin-left: auto ;
  			margin-right: auto ;
		}
		</style>
		
	</body>
</html>
